<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        .login-container {
            margin-top: 100px;
        }
        input {
            padding: 8px;
            margin: 5px;
        }
        button {
            padding: 8px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            cursor: pointer;
        }
    </style>
</head>

<body>
<div class="login-container">
    <h2>Login</h2>
    <form id="loginForm" onsubmit="return handleLogin()">
        <input type="text" id="username" name="username" placeholder="Username" required><br>
        <input type="password" id="password" name="password" placeholder="Password" required><br>
        <input type="submit" value="Login">
    </form>
</div>

<script>
    function handleLogin() {
        const username = document.getElementById('username').value;
        const password = document.getElementById('password').value;

        fetch("http://localhost:8080/webchatsai_war_exploded/login", {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            }
        })
            .then(response => response.json())
            .then(data => {
                let loginSuccessful = false;

                data.forEach(user => {
                    if (user.username === username && user.password === password) {
                        loginSuccessful = true;
                    }
                });

                if (loginSuccessful) {
                    alert('Login successful');
                    window.location.href = 'index.html'; // Redirect to another page on successful login
                } else {
                    alert('Login failed. Please check your username and password.');
                }
            })
            .catch(error => console.error('Error:', error));

        return false; // Prevent form submission
    }
    document.getElementById('loginForm').addEventListener('submit', handleLogin);
</script>
</body>

</html>